<template>
    <el-row class="login-page">
        <el-col class="bg">
            <el-row class="logo"></el-row>
            <el-row class="form login">
                <!-- 注册表单 -->
                <el-form ref="formzhu" 
                size="large" autocomplete="off" v-if="isRegister"
                :model="formzhuce" :rules="rules">
                <el-form-item >
                    <h1>注册</h1>
                </el-form-item>
                <el-form-item prop="username">
                    <el-input :prefix-icon="User" placeholder="请输入用户名" v-model="formzhuce.username"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input
                    v-model="formzhuce.password"
                    :prefix-icon="Lock"
                    type="password"
                    placeholder="请输入密码"
                    ></el-input>
                </el-form-item>
                <el-form-item prop="pwd" >
                    <el-input
                    v-model="formzhuce.pwd"
                    :prefix-icon="Lock"
                    type="password"
                    placeholder="请输入再次密码"
                    ></el-input>
                </el-form-item>
                <!-- 注册按钮 -->
                <el-form-item>
                    <el-button class="button" type="primary btn" 
                    auto-insert-space @click="zhuce(formzhu)">
                    注册
                    </el-button>
                </el-form-item>
                <el-form-item class="flex">
                    <el-link type="info" :underline="false" @click="isRegister = false">
                    ← 返回
                    </el-link>
                </el-form-item>
                </el-form>
                <!-- 登录表单 -->
                <el-form ref="formlu" size="large" autocomplete="off" 
                    :model="formdeng" :rules="rulesdeng"  v-else>
                <el-form-item>
                    <h1>登录</h1>
                </el-form-item>
                <el-form-item prop="username">
                    <el-input :prefix-icon="User" v-model="formdeng.username"  placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input
                    v-model="formdeng.password"
                    name="password"
                    :prefix-icon="Lock"
                    type="password"
                    placeholder="请输入密码"
                    ></el-input>
                </el-form-item>
                <el-form-item class="flex">
                    <div class="flex">
                    <el-checkbox>记住我</el-checkbox>
                    <el-link type="primary" :underline="false">忘记密码？</el-link>
                    </div>
                </el-form-item>
                <!-- 登录按钮 -->
                <el-form-item>
                    <el-button class="button" type="primary btn" 
                       @click="denglu(formlu)"     auto-insert-space
                    >登录</el-button
                    >
                </el-form-item>
                <el-form-item class="flex">
                    <el-link type="info" :underline="false" @click="isRegister = true">
                    注册 →
                    </el-link>
                </el-form-item>
                </el-form>
            </el-row>
        </el-col>
    </el-row>
</template>
<script setup>
// 引入ref
import { ref, reactive } from 'vue'
// 引入图标
import { User, Lock } from '@element-plus/icons-vue'
// 引入请求
import { save,cha} from '@/api/login'
// 引入提示框
import { ElMessage } from 'element-plus'
// 引入路由
import { useRouter } from 'vue-router'
const router = useRouter();
//引入pinia
import { useUserStore } from '@/stores/token.js'
const userStore = useUserStore(); // 拿到pinia中的user容器对象

//登录表单数据
const formdeng=ref({
    username: '',
    password: '',
})

//定义登录方法，向后端发送请求
const denglu_cha=async()=>{
    const res=await cha(formdeng.value)
    console.log(res)
    if(res.code==20041){
        ElMessage({
            message: res.msg,
            type: 'success',
            plain: true,
        })
        formdeng.value={}
        var result=res.data  //登录成功的对象
        //将登录成功的对象保存到pinia中
        userStore.setdenglu(result)
        router.push('/shouye')
    }else{
       ElMessage({
            message: res.msg,
            type: 'error',
            plain: true,
        })
    }
}

//定义用于校验登录的表单对象
const formlu =ref(null)
// 定义表单验证规则
const rulesdeng=ref({
    username: [
      { required: true, message: '请输入用户名', trigger: 'blur' },
      {min:2,max:5,message:'长度在2到5个字符',trigger:'blur'}
    ],
    password: [
      { required: true, message: '请输入密码', trigger: 'blur' },
       { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
    ]
})

//登录按钮
const denglu=(obj)=>{
    console.log(obj);
    // 触发obj这个表单的校验规则 如果校验通过 则valid是true  否则是false
    obj.validate((valid) => {
        if (valid) {
            ElMessage({
                message: '校验成功',
                type: 'success',
            })
            denglu_cha()
        } else {
            ElMessage.error('校验失败')
        }
    });
}



// 注册表单
const isRegister = ref(false)

//注册表单数据
const formzhuce=ref({
    username: '',
    password: '',
    pwd:''
})

//定义注册方法，向后端发送请求
const zhuce_save=async()=>{
    const res=await save(formzhuce.value)
    console.log(res)
    if(res.code==20041){
        ElMessage({
            message: res.msg,
            type: 'success',
            plain: true,
        })
        isRegister.value=false
        formzhuce.value={}
    }else{
       ElMessage({
            message: res.msg,
            type: 'error',
            plain: true,
        })
    }
}

//定义用于校验的表单对象
const formzhu =ref(null)
// 定义表单验证规则
const rules=ref({
    username: [
      { required: true, message: '请输入用户名', trigger: 'blur' },
      {min:2,max:5,message:'长度在2到5个字符',trigger:'blur'}
    ],
    password: [
      { required: true, message: '请输入密码', trigger: 'blur' },
       { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
    ],
    pwd: {
        //自定义规则
        validator(rule, value, callback) {
            if (value === '') {
                callback(new Error('请输入密码'));
            }
            // 校验两次密码是否一致 value 就是确认密码的值
            if(value !== formzhuce.value.password){
                callback(new Error('两次密码不一致'));
            }
            else {
            callback(); // 表示验证通过
            }
        },
        trigger:'blur'
    }
})

//注册按钮
const zhuce=(obj) => {
    console.log(obj);
    console.log(formzhuce.value);
    // 触发obj这个表单的校验规则 如果校验通过 则valid是true  否则是false
    obj.validate((valid) => {
        if (valid) {
            ElMessage({
                message: '校验成功',
                type: 'success',
            })
            zhuce_save()
        } else {
            ElMessage.error('校验失败')
        }
    });
}

</script>


<style lang='scss' scoped>
.login-page {
  height: 100vh;
  background-color: #fff;

  .bg {
    

    background-image: url("@/assets/back.jpg"); /* 替换为你的图片路径 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */

    .logo {
        
      width: 430px;
      height: 500px;
      flex: 0 0 auto; /* 禁止伸缩和收缩，自动基线对齐 */
      background-image: url("@/assets/logo2.png"); /* 替换为你的图片路径 */
      background-position: center;
      background-repeat: no-repeat;
      background-color: #00b96b;
      opacity: 0.9;
    }

    .login {
      width: 500px;
      height: 500px;
      flex: 0 0 auto; /* 禁止伸缩和收缩，自动基线对齐 */
      background-color: #fff;
      padding: 35px;
    }

    .form {
      display: flex;
      flex-direction: column;
      justify-content: center;
      user-select: none;

      .title {
        margin: 0 auto;
      }

      .button {
        width: 100%;
      }
      .login {
        background: #00b96b;
      }

      .flex {
        width: 100%;
        display: flex;
        justify-content: space-between;
      }
      .btn{
        background-color: #00b96b;
      }
    }
  }
}
</style>